<template>
    <div>
        <div class="assess">
            <Top title="评论" iconShow="1"></Top>
            <div class="assess-assessdo">
                <span class="assess-assessdo-netassess">网友评论</span>
                <!-- <span  class="assess-assessdo-num"><span style="color:red;">20</span> 条评论</span> -->
                <textarea placeholder="文明上网，不传谣言，登录可评论！" v-model="submitContent" ref="textarea"></textarea>
                <div class="assess-assessdo-btn" @click="submit">发表评论</div>
            </div>
            <div class="assess-title">评论内容</div>
            <div>
                <div v-if="commentList.length<=0" style="line-height:30px;font-size:13px;margin-left:0;padding-left:12px;width:100%;box-sizing:border-box;">目前还没有任何评论哦，快去评论吧！</div>
                <!-- <div class="assess-item" v-for="(item,index) in commentList" :key="index">
                    <span>{{item.name}}</span>
                    <p>{{item.content}}</p>
                </div> -->
                <div class="assess-item" v-for="(item,index) in commentList" :key="index">
                    <!-- TUDO -->
                    <nav>
                        <img :src="item.commentHeadImg||'../static/img/user.png'" class="assess-item-img fl" alt="头像">
                        <span class="assess-item-nickname">{{item.nickname || item.name}}</span>
                        <span class="assess-item-date fl">{{item.time|formatDate1}}</span>
                    </nav>
                    <p class="assess-item-text">{{item.content}}</p>
                </div>
                <!-- <div class="assess-more">查看更多评论>></div> -->
            </div>

            <div class="assess-goTop" @click="goTop" v-if="commentShow">
                <i class="iconfont icon-pinglun"></i>
            </div>
        </div>
          <loading title="加载中..."  v-if="loadMoreShow"></loading>
          <Nomore v-if="noMoreShow"></Nomore>
    </div>
</template>
<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import Foot from 'components/Footer/Footer'
import { Toast, MessageBox,Indicator } from 'mint-ui'
export default {
  name: 'assess',
  components: { Top,Foot },
  data() {
    return {
      commentList: [],
      submitContent: '',
      selectedList: [],
      flag: true,
      pageNum: 1,
      loadMoreShow: false,
      noMoreShow: false,
      commentShow: false
    }
  },
  filters:{
     formatDate1(val){
          return commons.formatDate1(val);
     }
  },
  created() {
    var _this = this;
    this.$nextTick(function() {
        window.addEventListener('scroll', onScroll)
    })
    // 判断滚动条位置，加载更多
    function onScroll() {
        var scrollTop = document.body.scrollTop;
        var innerHeight = window.innerHeight;
        var offsetHeight = document.body.offsetHeight;
        if (scrollTop >= 140) {
            _this.commentShow = true;
        } else {
            _this.commentShow = false;
        }
        if (scrollTop + innerHeight >= offsetHeight) {
            if (_this.flag) {
                if (_this.commentList.length >= 7) {
                    _this.flag = false;
                    _this.getCommentList()
                } else {
                    _this.noMoreShow = true;
                }
            }
        }
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    var pid = commons.getParameter('id');
    this.$http.post('/loansupermarket-app/comment/postComment', 
    { pid: pid, pageSize: 7, pageNum: 1 }).then(function(response) {
        var resBody = response.data;
        if (resBody.code == '000') {
            this.commentList = resBody.data;
            
            if (this.commentList.length < 7) {
                this.noMoreShow = true;
            }
        }
    })
  },
  methods: {
    submit() {
      var token = commons.getCookie('token');
      var pid = commons.getParameter('id');
      this.commentList = [];
      this.noMoreShow = false;
      if (this.submitContent.length <=0 || this.submitContent.length > 200) {
          MessageBox.alert('内容应少于200个字符且不能为空~')
      }else {
        this.$http.post('/loansupermarket-app/comment/add', { postId: pid, content: this.submitContent, token: token }).then(function(response) {
          var resBody = response.data;
          if (resBody.code == '000') {
            Toast({
                message: '评论成功',
                iconClass: 'iconfont icon-guanggaolanyouhua02'
            });
            this.submitContent = '';
         var pid = commons.getParameter('id');
            this.pageNum = 1;
            this.loadMoreShow = true;
            var _this = this;
            setTimeout(function() {
              _this.$http.post('/loansupermarket-app/comment/postComment', { pid: pid, pageSize: 7, pageNum: _this.pageNum }).then(function(response) {
                  var resBody = response.data;
                  if (resBody.code == '000') {
                      // this.commentList = resBody.data;
                      _this.loadMoreShow = false;
                      // var resBody = response.body;
                      if (resBody.data.length < 7) {
                          _this.noMoreShow = true;
                          _this.flag = false;
                      } else {
                          _this.flag = true;
                      }
                      _this.commentList = this.commentList.concat(resBody.data);
                  }
                })
              }, 500)
            }else if (resBody.code == '444') {
                window.location.href = commons.paths+'/user/login.html?history=1'
            }else{
                MessageBox.alert(resBody.mesg);
            }
        })
      }
    },
    getCommentList() {
      var pid =commons.getParameter('id');
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
          _this.$http.post('/loansupermarket-app/comment/postComment', { pid: pid, pageSize: 7, pageNum: _this.pageNum }).then(function(response) {
              var resBody = response.data;
              if (resBody.code == '000') {
                  // this.commentList = resBody.data;
                  _this.loadMoreShow = false;
                  // var resBody = response.body;
                  if (resBody.data.length < 7) {
                      _this.noMoreShow = true;
                      _this.flag = false;
                  } else {
                      _this.flag = true;
                  }
                  _this.commentList = this.commentList.concat(resBody.data);
              }
          })
      }, 500)

    },
    goTop() {
      window.scrollTo(0, 0);
      this.$refs.textarea.focus()
    }   
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.assess {
  background: #fff;
  margin-top: 1.2rem;
  text-align: left;
  //   &-item {
  //     width: calc(100% - 0.4rem); // height: 1.7rem;
  //     padding-bottom: 0.2rem;
  //     margin-left: 0.4rem;
  //     border-bottom: 1px solid $borderColor;
  //     span {
  //       line-height: 0.93rem;
  //       font-size: 0.3rem;
  //       color: #686868;
  //     }
  //     p {
  //       font-size: 0.35rem;
  //       word-wrap: break-word;
  //     }
  //     &:last-child {
  //       border-bottom: none;
  //     }
  //   }
  &-item {
    $itemh: 0.6rem;
    padding-bottom: 0.2rem;
    width: calc(100% - 0.4rem);
    // height: 1.7rem;
    margin-left: 0.4rem;
    border-bottom: 1px solid $borderColor;
    nav {
      padding: 0.2rem 0;
      span {
        display: inline-block;
        line-height: $itemh;
        vertical-align: middle;
        font-size: 0.3rem;
        color: #686868;
      }
      img {
        width: $itemh;
        height: $itemh;
        border-radius: 50%;
        border: none;
        overflow: hidden;
      }
    }
    &-nickname{
      text-indent: .2rem;
    }
    &-text {
      clear: both;
      font-size: 0.35rem;
      word-wrap: break-word;
    }
    &-date {
      float: right;
      margin-right: 0.1rem;
    }
  }
  &-assessdo {
    overflow: hidden;
    &-netassess {
      line-height: 0.8rem;
      margin-left: 0.4rem;
    }
    textarea {
      width: 9.2rem;
      height: 3rem;
      margin-left: 0.4rem;
      box-sizing: border-box;
      padding: 0.2rem;
    }
    &-num {
      float: right;
      margin-right: 0.4rem;
      line-height: 0.8rem;
    }
    &-btn {
      width: 2rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
      float: right;
      margin-right: 0.4rem;
      background: $primaryColor;
      color: #fff;
    }
  }
  &-title {
    padding-left: 0.4rem;
    border-bottom: 2px solid $borderColor;
    line-height: 1rem;
    font-size: 0.4rem;
  }
  &-more {
    height: 1.14rem;
    line-height: 1.14rem;
    color: $primaryColor;
    text-align: center;
    font-size: 0.38rem;
  }
  &-goTop {
   box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    right: 0.5rem;
    animation: myfirst 1.5s infinite linear;
    i {
      font-size: 0.8rem;
      color: #48d8db;
    }
  }
}

</style>
